<template>
  <div
    class="bookmark"
    :style="style"
    ref="bookmark"
  ></div>
</template>

<script>
export default {
  props: {
    width: Number,
    height: Number,
    color: String
  },
  computed: {
    style() {
      if (this.color) {
        return {
          borderColor: `${this.color} ${this.color} transparent ${this.color}`
        }
      } else {
        return {}
      }
    }
  },
  methods: {
    refresh() {
      if (this.height && this.width) {
        this.$refs.bookmark.style.borderWidth = `${this.height / 64}rem ${this.width / 64}rem ${this.width / 64}rem ${this.width / 64}rem`
      }
    }
  },
  mounted() {
    this.refresh();
  }
}
</script>

<style lang="less" scoped>
.bookmark {
  width: 0;
  height: 0;
  border-width: 0.75rem 0.25rem 0.25rem 0.25rem;
  border-style: solid;
  border-color: white white transparent white;
}
</style>